<template>
    <div class="ls-dialog__trigger" @click="onTrigger">
        <!-- 触发弹窗 -->
        <slot name="trigger"></slot>
    </div>
    <el-dialog
        coustom-class="ls-dialog__content"
        :title="title"
        v-model="visible"
        :width="width"
        :modal-append-to-body="false"
        center
        :before-close="close"
        :close-on-click-modal="false"
        @close="close"
    >
        <!-- 弹窗主要内容-->
        <div class="">
            <el-form ref="formRef" :model="formData" label-width="120px">
                <el-form-item :label="'当前积分'">
                    <div>{{ value || 0 }}</div>
                </el-form-item>
                <el-form-item :label="'积分增减'">
                    <!-- 单选按钮 -->
                    <el-radio-group class="m-r-16" v-model="formData.changeType">
                        <el-radio :label="200">增加积分</el-radio>
                        <el-radio :label="201">扣减积分</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="'调整积分'" prop="num">
                    <div>
                        <el-input
                            class="ls-input"
                            v-model="formData.changePoints"
                            @input="inputChange"
                            placeholder="请输入调整的积分"
                            style="width: 300px"
                            maxlength="8"
                        >
                            <template #append>元</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="'调整后积分'">
                    <div v-if="type == 3">{{ lastValue }}</div>
                    <div v-else>{{ lastValue }}</div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        class="ls-input"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入备注"
                        v-model="formData.remark"
                        style="width: 300px"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部弹窗页脚 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button size="small" @click="close">取消</el-button>
                <el-button size="small" @click="updateUserAdjustUserWallet" type="primary"
                    >确认</el-button
                >
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { integralUpdate } from '@/api/consumer'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import feedback from '@/utils/feedback'

/** Emit Start **/
const emit = defineEmits(['refresh'])
/** Emit End **/

/** Props Start **/
const props = withDefaults(
    defineProps<{
        type: number // 变动类型：1-用户金额；2-可提现金额；3-积分
        title: string // 弹窗标题
        width: string | number // 弹窗的宽度
    }>(),
    {
        type: 1,
        title: '积分调整',
        width: '570px'
    }
)
/** Props Start **/

/** Data Start **/
const value = ref('')
const userId = ref('')
const visible = ref<boolean>(false)
const formRef = ref<FormInstance>()
const formData: any = ref({
    userPoints: 0, // 金额
    changePoints: 0, //变动金额
    changeType: 200, // 调整类型：201-减少；200-增加
    remark: '' // 备注
})
/** Data End **/

/** Computed Start **/
/**
 * @description 修改后的总金额
 */
const lastValue: any = computed(() => {
    let total: any = value.value
    if (formData.value.changeType == 200) {
        total = Number(formData.value.changePoints) + total * 1
    } else {
        total = total * 1 - Number(formData.value.changePoints)
    }
    formData.value.userPoints = total
    return total
})
/** Computed End **/

/** Methods Start **/
/**
 * @description 调整用户钱包
 */
const updateUserAdjustUserWallet = async (): Promise<void> => {
    const num = formData.value.changePoints * 1
    if (num <= 0) {
        feedback.msgError('请输入大于0的数字')
        return
    }
    try {
        await integralUpdate({ ...formData.value, userId: userId.value })
        await feedback.msgSuccess('积分修改成功！')
        emit('refresh')
        visible.value = false
    } catch (error) {
        console.log(error)
    }
}

const inputChange = (e: any) => {
    formData.value.changePoints = formData.value.changePoints.replace(/[^0-9]/g, '')
}

/**
 * @description 触发弹窗
 */
const onTrigger = (money: any, id: any) => {
    value.value = money
    userId.value = id
    visible.value = true
    // 重制表单内容
    formData.value.changePoints = 0
    formData.value.remark = ''
}

/**
 * @description 关闭弹窗
 */
const close = () => {
    visible.value = false
}
/** Methods End **/

defineExpose({ onTrigger })
</script>


// Auto-generated function
const createObject = (e: any) => {
    formData.value.changePoints = formData.value.changePoints.replace(/[^0-9]/g, '')
}

// Auto-generated function
const terminatorOnTriggerTime = (money: any, id: any) => {
    value.value = money
    userId.value = id
    visible.value = true
    // 重制表单内容
    formData.value.changePoints = 0
    formData.value.remark = ''
}

// Auto-generated function
function
senderConstList terminatorOnTriggerTime = (money: any, id: any) => {
    value.value = money
    userId.value = id
    visible.value = true
    // 重制表单内容
    formData.value.changePoints = 0
    formData.value.remark = ''
}